/**
 * 
 */
var pbar1; // 定义一个变量用于进度条对象
var btn1; // 定义一个变量用于进按钮对象
Ext.onReady(function() {
	pbar1 = new Ext.ProgressBar({ // 实例化进度条
		renderTo : "div1", // 进度条呈现的一个DIV
		width : 800, // 进度条的宽度
		text : "单击更新按钮开始更新..." // 在进度条里的初始文本
	});
	btn1 = Ext.get("btn1"); // 按钮对象
	btn1.on("click", f1); // 按钮事件，单击时调用f1()函数
});
var i = 0; // 初始化一个变量为0，下面会用到。
function f1() {
	i++; // 让i加1
	pbar1.updateProgress(i / 100.0); // 让进度条更新到指定的进度。这个值是0-1之间的数，我让i/100.0,以让它的结果是一个小数
	pbar1.updateText("更新进度:" + i + "%"); // 进度条显示的文本
	if (i == 100) { // 当i==100的时候让按钮状态可以使用，并让i=1，再让进度条停止
		document.getElementById("btn1").disabled = false;
		Ext.Msg.alert("信息", "已经更新完成......"); // 对话框
		i = 0;
		clearInterval(x);
	}
	document.getElementById("btn1").disabled = true; // 让按钮的状态为不可用
	setTimeout("f1()", 50);// 用setTimeout函数递归调用f1()函数，以达到进度条一直跑的效果
}
// *****************进度条实例2*********************//
var pbar2;// 定义一个变量用于进度条对象
var btn2;// 定义一个变量用于进按钮对象
Ext.onReady(function() {
	pbar2 = new Ext.ProgressBar({ // 实例化进度条
		renderTo : "div2", // 进度条呈现的一个DIV
		width : 600, // 进度条的宽度
		text : "单击按钮开始..." // 在进度条里的初始文本
	});
	btn2 = Ext.get("btn2"); // 按钮对象
	btn2.on("click", function() {// 按钮事件，单击时执行funciton()
		Runner.run(pbar2, btn2, 10, function() { // Runner是在下面定义。Runner.run方法参数(进度条对象，按钮对象，进度大小：可以自由设定，进度条完成时执行的行数：如果不做任何事情可以填null)
			Ext.Msg.alert("Information", "进度条已经加载完成......"); // 对话框
			pbar2.reset(); // 重置进度条
			pbar2.updateText("单击按钮重新开始..."); // 更新进度条的文本
		});
	});
});
// 这个函数是我从Ext官方下载的包里的examples里直接拷贝来的，我也懒得去研究，貌似有点复杂
var Runner = function() {
	var f = function(v, pbar, btn, count, cb) {
		return function() {
			if (v > count) {
				btn.dom.disabled = false;
				cb();
			} else {
				if (pbar.id == 'pbar4') {
					// give this one a different count style for fun
					var i = v / count;
					pbar.updateProgress(i, Math.round(100 * i)
							+ '% completed...');
				} else {
					pbar.updateProgress(v / count, 'Loading item ' + v + ' of '
							+ count + '...');
				}
			}
		};
	};
	return {
		run : function(pbar, btn, count, cb) {
			btn.dom.disabled = true;
			var ms = 5000 / count;
			for (var i = 1; i < (count + 2); i++) {
				setTimeout(f(i, pbar, btn, count, cb), i * ms);
			}
		}
	}
}();
// ***********进度条实例3**************//
var pbar3;// 定义一个变量用于进度条对象
var btn3;// 定义一个变量用于进按钮对象
Ext.onReady(function() {
	pbar3 = new Ext.ProgressBar({ // 实例化进度条
		renderTo : "div3", // 进度条呈现的一个DIV
		width : 300, // 进度条的宽度
		text : "单击按钮开始..." // 在进度条里的初始文本
	});
	btn3 = Ext.get("btn3"); // 按钮对象
	btn3.on("click", function() { // 按钮单击事件
		btn3.dom.disabled = true; // 把按钮设置为不可用状态
		pbar3.updateText("正在更新..."); // 更新进度条的文本信息
		pbar3.wait({ // 开始执行进度条
			interval : 100, // 每次进度的时间间隔
			duration : 5000, // 进度条跑动的持续时间
			increment : 50, // 进度条的增量，这个值设的越大，进度条跑的越慢，不能小于1，如果小于1，进度条会跑出范围
			fn : function() { // 进度条完成时执行的函数，也可设为nulll
				btn3.dom.disabled = false;// 把按钮设置为可用状态
				pbar3.updateText("更新完成..单击按钮重新开始...");// 更新进度条的文本信息
			}
		});
	});
});